<template>
  <div id="play">
    <Head />
    <div class="play_main">
      <div class="left">
        <div class="heand_title">
          <span>{{ resources.title }}</span>
        </div>
        <div class="play_detail">
          <span class="playc_ount" title="播放次数">
            <i class="iconfont icon-bofang" style="font-size: 14px">
              {{ resources.hotDegree }}</i
            ></span
          >
          <span class="comment_count" title="评论次数"
            ><i class="iconfont icon-pinglun" style="font-size: 14px">
              223</i
            ></span
          >
          <span class="create_time" title="发布时间">{{
            resources.createTime
          }}</span>
          <span
            ><i
              class="iconfont icon-jinzhi"
              style="color: red; font-size: 14px"
            >
              未经授权禁止转载</i
            ></span
          >
        </div>
        <div class="bofang">
          <video-player
            :key="playerOptions.poster"
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :options="playerOptions"
          />
          <!-- 弹幕 Canvas -->
          <canvas ref="danmuCanvas" class="danmu-canvas"></canvas>
        </div>
        <div class="bofang_footer">
          <div class="other">
            <div class="love" title="点赞" @click="like()">
              <i class="iconfont icon-dianzan"></i>
            </div>
            <div class="collect" title="收藏" @click="addCollect">
              <i class="iconfont icon-shoucang"></i>
            </div>
            <div class="share_count" title="分享">
              <i class="iconfont icon-zhuanfa"></i>
            </div>
          </div>
          <div class="danmu">
            <div class="danmu_container">
              <input
                type="text"
                placeholder="请输入弹幕内容"
                v-model="danmuContent"
              />
              <el-button type="primary" @click="sendDanmu">发送</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="jishu">
          <span>选择集数</span>
          <ul style="padding: 0%">
            <li v-for="item in parentList" :key="item.id">{{ item.title }}</li>
          </ul>
        </div>
        <div class="control-buttons">
          <div class="btn" @click="preclick">
            <i class="iconfont icon-shangyiji" style="font-size: 40px;" title="上一集"></i>
          </div>
          <div class="btn" @click="nextclick">
            <i class="iconfont icon-xiayiji" style="font-size: 40px;" title="下一集"></i>
          </div>
        </div>
      </div>
    </div>
    <template>
      <div class="comment">
        <div class="head">
          <h2 class="title">
            评论 <span class="comment-count">共{{ comment.length }}条</span>
          </h2>
          <el-form :model="Commentform" class="comment-form">
            <el-form-item>
              <el-input
                type="textarea"
                v-model="Commentform.comment"
                placeholder="请输入您的看法"
                class="input-box"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="submit-btn"
                @click="onSubmitComment1"
                >发表评论</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <div class="comment-section">
          <span class="highlight-text">精彩评论</span>
        </div>

        <div
          class="commentList"
          v-for="item in comment.slice().reverse()"
          :key="item.id"
        >
          <div class="commentContent">
            <!-- 头像 -->
            <el-image class="avatar" :src="item.avatar"></el-image>

            <div class="comment-body">
              <div class="comment-header">
                <span class="username">{{ item.username }}</span>
                <span class="comment-time">{{ item.createTime }}</span>
              </div>
              <div class="comment-text">{{ item.content }}</div>

              <div class="comment-actions">
                <!-- 点赞 -->
                <i
                  @click="likeComment(item.id)"
                  class="iconfont icon-31dianzan like-icon"
                ></i>
                <span v-if="item.likes != 0" class="like-count">{{
                  item.likes
                }}</span>

                <!-- 回复 -->
                <span class="reply-btn" @click="toggleReplyForm(item)"
                  >回复</span
                >

                <!-- 删除 -->
                <span class="delete-btn">删除</span>
              </div>
            </div>
          </div>

          <!-- 回复框 -->
          <div class="reply-section" v-show="item.showReplyForm">
            <el-form :model="item.replyForm">
              <el-form-item>
                <el-input
                  type="textarea"
                  v-model="item.replyForm.comment"
                  placeholder="请输入您的看法"
                  class="input-box"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  class="submit-btn"
                  @click="onSubmitComment(item)"
                  >发表评论</el-button
                >
                <el-button class="cancel-btn" @click="cancel(item)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <!-- 子评论 -->
          <div class="childComments" v-show="item.showReplyForm">
            <div
              v-for="reply in item.replies"
              :key="reply.id"
              class="child-comment"
            >
              <el-image class="avatar" :src="reply.avatar"></el-image>
              <div class="comment-body">
                <div class="comment-header">
                  <span class="username">{{ reply.username }}</span>
                  <span class="comment-time">{{ reply.createTime }}</span>
                </div>
                <div class="comment-text">{{ reply.content }}</div>

                <div class="comment-actions">
                  <i
                    @click="likeComment(reply.id)"
                    class="iconfont icon-31dianzan like-icon"
                  ></i>
                  <span v-if="reply.likes != 0" class="like-count">{{
                    reply.likes
                  }}</span>

                  <span class="reply-btn" @click="toggleReplyForm(reply)"
                    >回复</span
                  >
                </div>
              </div>
            </div>
          </div>
        
          <div class="separate"></div>
        </div>
      </div>
    </template>
  </div>
</template>


        
        <script>
import Head from "../../components/head.vue";
export default {
  name: "play",
  components: {
    Head,
  },
  data() {
    return {
      playerOptions: {
        autoplay: false, // 是否自动播放
        controls: true, // 显示控制栏
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 倍速播放
        sources: [
          {
            src: "", // 视频地址
            type: "video/mp4", // 视频类型
          },
        ],
        poster: "", // 视频封面
        width: "640", // 视频宽度
        height: "500", // 视频高度
        controlBar: {
          volumePanel: true, // 显示音量控制
          playbackRateMenuButton: true, // 显示倍速控制
        },
      },
      danmuContent: "", // 存储用户输入的弹幕内容
      danmuList: [], // 存储所有弹幕

      resources: {}, // 资源信息
      // showReplyForm: false,
      comment_username: "",
      comment_userImg: "",
      comment_time: "",
      comment_content: "",
      comment: [],
      info: [],
      Commentform: {
        comment: "",
      },
      parentList: [],
    };
  },
  methods: {
    // 发送弹幕
    sendDanmu() {
      if (!this.danmuContent.trim()) return;

      this.danmuList.push({
        text: this.danmuContent,
        x: this.$refs.danmuCanvas.width, // 起点位置
        y: Math.random() * this.$refs.danmuCanvas.height, // 随机纵向位置
        speed: Math.random() * 1 + 0.1, // 弹幕速度
        color: this.getRandomColor(), // 随机颜色
      });

      this.danmuContent = "";
    },
    getRandomColor() {
      return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
        Math.random() * 255
      })`;
    },
    drawDanmu() {
      const canvas = this.$refs.danmuCanvas;
      if (!canvas) return;
      const ctx = canvas.getContext("2d");

      canvas.width = this.$refs.videoPlayer.$el.clientWidth;
      canvas.height = this.$refs.videoPlayer.$el.clientHeight;

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      this.danmuList.forEach((danmu, index) => {
        danmu.x -= danmu.speed; // 让弹幕向左移动
        ctx.font = "20px Arial";
        ctx.fillStyle = danmu.color;
        ctx.fillText(danmu.text, danmu.x, danmu.y);

        // 如果弹幕完全离开屏幕，则删除
        if (danmu.x < -ctx.measureText(danmu.text).width) {
          this.danmuList.splice(index, 1);
        }
      });

      requestAnimationFrame(this.drawDanmu);
    },
    // 上一集
    preclick() {
      this.$message.success("上一集");
    },
    // 下一集
    nextclick() {
      this.$message.success("下一集");
    },
    // 获取资源
    getSources() {
      //获取url中的id
      const id = this.$route.query.resourcesId;
      let url = "/api/resources/get/" + id;
      this.$http.get(url).then((res) => {
        this.resources = res.data.data;
        this.playerOptions.sources[0].src = this.resources.url;
        this.$nextTick(() => {
          this.playerOptions.poster = this.resources.coverImage;
        });
      });
    },
    // 添加收藏
    addCollect() {
      let resourcesId = this.$route.query.resourcesId;
      let url = "/api/resources/collect/insert/" + resourcesId;
      this.$http.post(url).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
    // 评论显示
    toggleReplyForm(item) {
      // 先关闭之前点击的评论的回复表单
      this.comment.forEach((comment) => {
        if (comment !== item) {
          comment.showReplyForm = false;
        }
      });

      // 切换当前点击的评论的回复表单状态
      item.showReplyForm = !item.showReplyForm;
    },
    // 取消按钮
    cancel(item) {
      item.showReplyForm = false;
    },
    onSubmitComment1() {
      if (!this.Commentform.comment) {
        this.$message({
          message: "请输入评论内容",
          type: "warning",
        });
        return;
      }
      let resourcesId = this.$route.query.resourcesId;
      let url = "/api/resources/comment/insert";
      let data = {
        content: this.Commentform.comment,
        resourcesId: resourcesId,
      };
      this.$http.post(url, data).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "评论成功",
            type: "success",
          });
          // 清空评论
          this.Commentform.comment = "";
          this.getComment(resourcesId);
        } else {
          this.$message({
            message: "评论失败",
            type: "error",
          });
        }
      });
    },

    onSubmitComment(item) {
      // 将回复内容添加到父评论的replies中
      item.replies.push({
        parentId: item.id, // 生成唯一id的函数，你可以根据自己的需求来实现
        content: item.replyForm.comment,
        avatar: this.info.userImg,
        username: this.info.username,
        resourcesId: this.$route.query.resourcesId,
      });

      // 请求体的数据的封装
      const replyData = {
        parentId: item.id,
        content: item.replyForm.comment,
        resourcesId: this.$route.query.resourcesId,
      };

      // 发起请求，将回复内容添加到数据库中
      let url_reback = "/api/resources/comment/insert";
      this.$http.post(url_reback, replyData).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          console.log(res.data.data);
          this.selectComment(item);
          this.$message({
            message: "回复成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "回复失败",
            type: "error",
          });
        }
      });

      // 清空回复表单内容
      item.replyForm.comment = "";
    },
    // 获取评论并关联用户信息
    getComment(resourcesId) {
      let url = "/api/resources/comment/list?resourcesId=" + resourcesId;
      this.$http.get(url).then((res) => {
        // 使用 Promise.all 来等待所有异步请求完成
        const commentPromises = res.data.data.map((item) => {
          return this.getUserInfo(item.userId).then((userInfo) => {
            // 返回合并后的评论数据
            return {
              ...item,
              avatar: userInfo.userImg,
              username: userInfo.username,
              showReplyForm: false,
              replies: [],
              replyForm: { comment: "" },
            };
          });
        });

        // 等待所有评论数据和用户信息加载完成
        Promise.all(commentPromises).then((comments) => {
          this.comment = comments;
        });
      });
    },

    // 查看评论
    selectComment(item) {
      let url = "/api/resources/comment/listByParentId/" + item.id;
      this.$http.get(url).then((res) => {
        console.log(res.data.data);
        if (res.data.data.length == 0) {
          this.$message({
            message: "暂无回复",
            type: "tip",
          });
        }
        item.replies = res.data.data.map((item) => {
          return {
            ...item,
            showReplyForm: false,
          };
        });
      });
    },
    // 根据ID获取用户信息
    getUserInfo(id) {
      return this.$http.get("/api/sysUser/get/" + id).then((res) => {
        return {
          userImg: "http://localhost:8585/uploads/" + res.data.data.avatar,
          username: res.data.data.username,
        };
      });
    },
    // 根据父类id获取资源
    getResourceByParentId() {
      let id = this.$route.query.resourcesId;
      this.$http.get("/api/resources/list/parent/" + id).then((res) => {
        this.parentList = res.data.data;
      });
    },

    like() {
      this.putlike(this.$route.query.resourcesId);
      this.getSources();
    },
    //点赞功能
    putlike(id) {
      let url = "/api/resources/like/" + id;
      this.$http.put(url).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "点赞成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "点赞失败",
            type: "error",
          });
        }
      });
    },
    // 增加播放量
    addHotDegree() {
      let url = "/api/resources/playHot/" + this.$route.query.resourcesId;
      this.$http.put(url).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "加载成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "正在加载",
            type: "warning",
          });
        }
      });
    },
  },
  mounted() {
    this.addHotDegree();
    this.getSources();
    this.getComment(this.$route.query.resourcesId);
    this.getResourceByParentId();
    this.drawDanmu();
  },
};
</script>
        
  <style lang="less" scoped>
#play {
  .play_main {
    width: 1300px;
    display: flex;
    margin: 0 auto;
    margin-top: 15px;
    .left {
      width: 70%;
      .heand_title {
        height: 50px;
        span {
          font-size: 24px;
          color: #000;
          font-weight: bold;
        }
      }
      .play_detail {
        .playc_ount {
          font-size: 14px;
          color: #a3a7ad;
          margin-right: 15px;
        }
        .comment_count {
          font-size: 14px;
          margin-right: 15px;
          color: #a3a7ad;
        }
        .create_time {
          font-size: 14px;
          margin-right: 15px;
          color: #a3a7ad;
        }
        span {
          font-size: 14px;
          color: #a3a7ad;
        }
      }
      .bofang {
        margin-top: 15px;
        height: 430px;
        overflow: hidden;
      }

      .bofang_footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      .other {
        display: flex;
        gap: 30px;
      }

      .other div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        transition: all 0.3s;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .other div:hover {
        background: #3776da;
        color: white;
      }

      .other i {
        font-size: 24px;
        color: #333;
        transition: color 0.3s;
      }

      .other div:hover i {
        color: white;
      }

      .danmu {
        display: flex;
        align-items: center;
        flex-grow: 1;
        margin-left: 30px;
      }

      .danmu_container {
        display: flex;
        width: 100%;
      }

      .danmu_container input {
        flex: 1;
        height: 40px;
        border: 2px solid #3776da;
        border-radius: 20px 0 0 20px;
        padding-left: 15px;
        font-size: 16px;
        outline: none;
      }

      .danmu_container .el-button {
        margin-top: 0%;
        height: 45px;
        background: #3776da;
        border-radius: 0 20px 20px 0;
        color: white;
        font-size: 16px;
        border: none;
        cursor: pointer;
        padding: 0 20px;
      }
    }
    .right {
      width: 30%;
      margin-left: 25px;
      .jishu {
        width: 320px;
        max-height: 400px;
        background: linear-gradient(135deg, #f3f4f6, #e3e5e7);
        border-radius: 16px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 80px;
        overflow-y: auto;
        transition: all 0.3s ease-in-out;
      }

      .jishu:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }

      .jishu span {
        font-size: 24px;
        color: #222;
        font-weight: 600;
        margin-bottom: 15px;
      }

      .jishu ul {
        padding-left: 0;
        list-style: none;
      }

      .jishu ul li {
        height: 44px;
        font-size: 18px;
        color: #333;
        margin-top: 12px;
        cursor: pointer;
        padding: 10px;
        border-radius: 8px;
        transition: background 0.3s ease, color 0.3s ease;
      }

      .jishu ul li:hover {
        background: #3776da;
        color: #fff;
        transform: scale(1.05);
      }

      .jishu ul li:active {
        background: #2b5bb1;
        color: #fff;
      }
      .control-buttons {
        display: flex;
        justify-content: space-between; /* 左右对齐 */
        align-items: center;
        margin-left: -33px;
        margin-right: -21px;
        padding: 0 30px;

        .btn {
          cursor: pointer;
          font-size: 44px;
          color: #000;
          transition: all 0.3s ease-in-out;
          padding: 10px;
          border-radius: 50%;
        }

        .btn:hover {
          color: #3776da;
          background: rgba(55, 118, 218, 0.1);
          transform: scale(1.1);
        }

        .btn:active {
          transform: scale(0.9);
        }
      }
    }
  }
}
/deep/ .head_center {
  display: none;
}
/deep/ .header {
  height: 50px;
}
/* 🌟 美化播放器容器 */
.video-container {
  width: 80%;
  max-width: 900px;
  margin: 20px auto;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 🌟 美化播放器 */
.video-player {
  border-radius: 10px;
  overflow: hidden;
}
/deep/ .video-js {
  height: 425px;
}

.comment {
  max-width: 850px;
  // margin: 30px auto;
  margin-left: 110px;
  margin-top: 50px;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.head {
  border-bottom: 2px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.comment-count {
  font-size: 14px;
  color: #888;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-box {
  width: 100%;
  border-radius: 8px;
  min-height: 80px;
}

.submit-btn {
  background: #409eff;
  color: white;
  border-radius: 6px;
  padding: 6px 12px;
  transition: 0.3s;
}

.submit-btn:hover {
  background: #66b1ff;
}

.commentList {
  margin-top: 15px;
}

.commentContent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  transition: 0.3s;
}

.commentContent:hover {
  background: #f7f8fa;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-body {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

.username {
  font-weight: bold;
  color: #333;
}

.comment-text {
  font-size: 15px;
  margin-top: 8px;
  color: #000;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 8px;
  margin-left: -29px;
}

.like-icon {
  font-size: 18px;
  cursor: pointer;
  color: #999;
  transition: 0.3s;
}

.like-icon:hover {
  color: #ff5252;
  transform: scale(1.1);
}

.like-count {
  color: #666;
}

.reply-btn,
.delete-btn {
  font-size: 14px;
  cursor: pointer;
  color: #888;
  transition: 0.3s;
}

.reply-btn:hover {
  color: #409eff;
}

.delete-btn:hover {
  color: #ff5252;
}

.reply-section {
  margin-top: 10px;
  padding-left: 50px;
}

.cancel-btn {
  background: #ddd;
  border-radius: 6px;
  padding: 6px 12px;
}

.cancel-btn:hover {
  background: #ccc;
}

.childComments {
  margin-left: 50px;
  padding-left: 10px;
  border-left: 2px solid #eee;
}

.child-comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}

.separate {
  width: 100%;
  height: 1px;
  background: #eee;
  margin-top: 15px;
}
.danmu-canvas {
  position: absolute;
  top: 153px;
  left: 0;

  pointer-events: none;
}
.danmu_container {
  display: flex;
  margin-top: 10px;
}
</style>
        